<template>
  <el-dialog
    custom-class="selfDialog"
    title="文档预览"
    :width="dialogWidth"
    :visible.sync="dialogFileVisible"
    :append-to-body="appendToBody"
  >
    <div v-if="fileType === 'img'">
      <viewer>
        <img :src="url" width="100%">
      </viewer>
    </div>
    <div v-else>
      <iframe id="fileIframe" :src="url" />
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    url: {
      required: true,
      default: '',
      type: String
    },
    fileType: {
      required: true,
      default: 'img',
      type: String
    },
    dialogWidth: {
      default: '85vw'
    },
    appendToBody: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogFileVisible: false
    }
  },
  mounted() {

  },
  created() {},
  methods: {
    close() {
      this.dialogFileVisible = false
    },
    show() {
      this.dialogFileVisible = true
    }
  }
}
</script>
<style lang='scss'>
iframe {
  width: 100%;
  height: 80vh;
}
</style>
